<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <style>
    .flip{
      position: relative;
      display: inline-block;
      width: 60px;
      height: 100px;
      line-height: 100px;
      border: solid 1px #000;
      background: #fff;
      color: #fff;
      font-size: 66px;
      text-align: center;
      font-family: "Helvetica Neue";
      box-shadow: 0 0 6px rgba(0,0,0,0.5);
      border-radius: 10px;
      margin: 0 2px;
    }
    .flip .digital::before,
    .flip .digital::after{
      content:'';
      position: absolute;
      left: 0;
      right: 0;
      background: #000;
      overflow: hidden;
      box-sizing: border-box;
    }
    .flip .digital::before{
      border-radius: 10px 10px 0 0;
      top: 0;
      bottom: 50%;
      border-bottom: solid 1px #666;
    }
    .flip .digital::after{
      border-radius: 0 0 10px 10px;
      top: 50%;
      bottom: 0;
      line-height: 0;
    }
    .flip .number0:before,
    .flip .number0:after {
        content: "0";
    }
    .flip .number1:before,
    .flip .number1:after {
        content: "1";
    }
    .flip .number2:before,
    .flip .number2:after {
        content: "2";
    }
    .flip .number3:before,
    .flip .number3:after {
        content: "3";
    }
    .flip .number4:before,
    .flip .number4:after {
        content: "4";
    }
    .flip .number5:before,
    .flip .number5:after {
        content: "5";
    }
    .flip .number6:before,
    .flip .number6:after {
        content: "6";
    }
    .flip .number7:before,
    .flip .number7:after {
        content: "7";
    }
    .flip .number8:before,
    .flip .number8:after {
        content: "8";
    }
    .flip .number9:before,
    .flip .number9:after {
        content: "9";
    }

    .flip.down .front::before{
      z-index: 3;
      
    }
    .flip.down .back::after{
      z-index: 2;
      
    }
    .flip.down .front::after,
    .flip.down .back::before{
      z-index: 1;
    }

    .flip.down .back::after{
      transform-origin: 50% 0;
      transform: rotateX(180deg);
    }

    .flip.down.go .front::before{
      transform-origin: 50% 100%;
      animation: flipFrontDown 0.3s linear both;
      backface-visibility: hidden;
    }

    .flip.down.go .back::after{
      animation: flipBackDown 0.3s linear both;
    }

    .flip.up .front::after{
      z-index: 3;
      
    }
    .flip.up .back::before{
      z-index: 2;
      
    }
    .flip.up .front::before,
    .flip.up .back::after{
      z-index: 1;
    }

    .flip.up .back::before{
      transform-origin: 50% 100%;
      transform: rotateX(180deg);
    }

    .flip.up.go .front::after{
      transform-origin: 50% 0;
      animation: flipFrontUp 0.3s linear both;
      backface-visibility: hidden;
    }

    .flip.up.go .back::before{
      transform-origin: 50% 100%;
      animation: flipBackUp 0.3s linear both;
    }

    .clock{
      margin: 20px 0;
      display: flex;
    }
    
    .char{
      font-size: 66px;
      line-height: 100px;
      display: flex;
      align-items: center;
    }

    @keyframes flipFrontDown {
      0%{
        transform: perspective(160px) rotateX(0deg);
      }
      100%{
        transform: perspective(160px) rotateX(180deg);
      }
    }

    @keyframes flipBackDown {
      0%{
        transform: perspective(160px) rotateX(180deg);
      }
      100%{
        transform: perspective(160px) rotateX(0deg);
      }
    }

    @keyframes flipFrontUp {
      0%{
        transform: perspective(160px) rotateX(0deg);
      }
      100%{
        transform: perspective(160px) rotateX(180deg);
      }
    }
    @keyframes flipBackUp {
      0%{
        transform: perspective(160px) rotateX(180deg);
      }
      100%{
        transform: perspective(160px) rotateX(0deg);
      }
    }

  </style>
  <div class="flip down">
    <div class="digital front number0"></div>
    <div class="digital back number1"></div>

  </div>
  <div class="btns">
    <button class="incBtn">+1</button>
    <button class="decBtn">-1</button>
  </div>
  <div class="clock">
    <div class="flip1 flip down">
      <div class="digital front number0"></div>
      <div class="digital back number1"></div>
    </div>
    <div class="flip2 flip down">
      <div class="digital front number0"></div>
      <div class="digital back number1"></div>
    </div>
    <span class="char">:</span>
    <div class="flip3 flip down">
      <div class="digital front number0"></div>
      <div class="digital back number1"></div>
    </div>
    <div class="flip4 flip down">
      <div class="digital front number0"></div>
      <div class="digital back number1"></div>
    </div>
    <span class="char">:</span>
    <div class="flip5 flip down">
      <div class="digital front number0"></div>
      <div class="digital back number1"></div>
    </div>
    <div class="flip6 flip down">
      <div class="digital front number0"></div>
      <div class="digital back number1"></div>
    </div>

  </div>
  <script>
    var flip = document.querySelector('.flip')
    var frontNode = document.querySelector('.front')
    var backNode = document.querySelector('.back')
    var incBtn = document.querySelector('.incBtn')
    var decBtn = document.querySelector('.decBtn')
    var count = 0
    var isFlipping = false
    console.log('incBtn', incBtn)
    incBtn.addEventListener('click', function(){
      flipInc()
    })
    decBtn.addEventListener('click', function(){
      flipDec()
    })

    function flipInc(){
      if(isFlipping){
        return
      }
      let nextCount = count >= 9 ? 0 : (count + 1)
      backNode.setAttribute('class', 'digital back number' + nextCount)
      isFlipping = true
      flip.setAttribute('class', 'flip down go')
      setTimeout(() => {
        count = nextCount
        flip.setAttribute('class', 'flip')
        frontNode.setAttribute('class', `digital front number${count}`)
        isFlipping = false
      }, 1000)
    }

    function flipDec() {
      if(isFlipping){
        return
      }

      let nextCount = count <=0 ? 9 : (count - 1) 
      backNode.setAttribute('class', 'digital back number' + nextCount)
      isFlipping = true
      flip.setAttribute('class', 'flip up go')
      setTimeout(() => {
        count = nextCount
        flip.setAttribute('class', 'flip')
        frontNode.setAttribute('class', `digital front number${count}`)
        isFlipping = false
      }, 1000)
    }

    class Flip{
      constructor(el, count = 0, maxEnd = 9, minEnd = 0){
        this.flip = document.querySelector(el) 
        console.log('this.flip %O', this.flip)
        this.frontNode = this.flip.querySelector('.front')
        this.backNode = this.flip.querySelector('.back')
        this.count = count? count: 0
        this.maxEnd = maxEnd? maxEnd: 9
        this.minEnd = minEnd? minEnd: 0
        this.isFlipping = false
      }

      flipInc(count){
        if(this.isFlipping){
          return
        }
        if(count == this.count) {
          return
        }
        let nextCount = this.count >= this.maxEnd  ? this.minEnd : (this.count + 1)
        if(typeof count === 'number' || (Number(count) >= 0 &&  Number(count) <= 9)){
          nextCount = Number(count)
        }
        this.backNode.setAttribute('class', 'digital back number' + nextCount)
        this.isFlipping = true
        this.flip.classList.add('down')
        this.flip.classList.add('go')
        setTimeout(() => {
          this.count = nextCount
          this.flip.classList.remove('down')
          this.flip.classList.remove('go')
          this.frontNode.setAttribute('class', `digital front number${this.count}`)
          this.isFlipping = false
        }, 500)
      }

      flipDec(count) {
        if(this.isFlipping){
          return
        }
        if(count == this.count) {
          return
        }
        let nextCount = this.count <=this.minEnd ? this.maxEnd : (this.count - 1) 
        if(typeof count === 'number' || (Number(count) >= 0 &&  Number(count) <= 9)){
          nextCount = Number(count)
        }
        this.backNode.setAttribute('class', 'digital back number' + nextCount)
        this.isFlipping = true
        this.flip.classList.add('up')
        this.flip.classList.add('go')
        setTimeout(() => {
          this.count = nextCount
          this.flip.classList.remove('up')
          this.flip.classList.remove('go')
          this.frontNode.setAttribute('class', `digital front number${this.count}`)
          this.isFlipping = false
        }, 500)
      }
    }

    function formateDate(formate = 'hh:mm:ss'){
      let date = new Date()
      let h = supportZero(date.getHours())
      let m = supportZero(date.getMinutes())
      let s = supportZero(date.getSeconds())
      return formate.replace('hh', h).replace('mm', m).replace('ss', s)
    }

    function supportZero(str){
      str = '' + str
      return ('00' + str).substr(str.length)
    }

    let flip1 = new Flip('.flip1')
    let flipList = []
    for(let i = 1;i < 7; i++){
      flipList.push(new Flip('.flip' + i))
    }
    setInterval(() => {
      let date = formateDate('hhmmss')

      for(let i = 0; i < 6; i++){
        console.log('date[i]', date[i])
        flipList[i].flipInc(date[i])
      }
    }, 1000)
  </script>
</body>
</html>